<template>
  <div class="detail-form" v-if="loadingFinish" >
    <Form :model="formInfo" ref="formInfo" class="ivu-form-no-margin-bottom form" :rules="rule" :label-width="90">
      <Row :gutter="32" class="code-row-bg">
        <Col span="12" style="border: none">
          <FormItem prop="businessUnit" label="BU编码">
            <Input
              v-model="formInfo.businessUnit"
              :maxlength="50"
              style="width: 100%"
              placeholder="请输入BU编码"
              clearable
            ></Input>
          </FormItem>
        </Col>
        <Col span="12" style="border: none">
          <FormItem prop="company" label="公司编码">
            <Input placeholder="请输入公司编码" clearable v-model.trim="formInfo.company" :maxlength="50" style="width: 100%"></Input>
          </FormItem>
        </Col> 

        <Col span="12" style="border: none">
          <FormItem prop="companyDescr" label="公司名称">
            <Input placeholder="请输入公司名称" clearable v-model.trim="formInfo.companyDescr" :maxlength="50" style="width: 100%"></Input>
          </FormItem>
        </Col>
        
        <Col span="12" style="border: none" v-if="isPlatformAdmin">
          <FormItem prop="tenantCode" label="所属租户">
            <Select
              :disabled="!!formInfo.id"
              label-in-value
              filterable
              :value="formInfo.tenantCode"
              style="width: 100%"
              clearable
              @on-change="
                ({ label = '', value = '' } = {}) => {
                  formInfo.tenantCode = value.trim();
                  formInfo.tenantName = label.trim();
                }
              "
            >
              <Option v-for="tenant in tenantList" :value="tenant.tenantCode" :key="tenant.id">
                {{ tenant.tenantName }}
              </Option>
            </Select>
          </FormItem>
        </Col> 

        <Col span="12" style="border: none" v-else>
          <FormItem prop="tenantCode" label="所属租户">
            <Input placeholder="请输入所属租户" clearable v-model.trim="tenantName" disabled :maxlength="50" style="width: 100%"></Input>
          </FormItem>
        </Col>

        <Col span="12" style="border: none">
          <FormItem prop="standard" label="差旅编码">
            <Input placeholder="请输入差旅编码" clearable v-model.trim="formInfo.standard" :maxlength="50" style="width: 100%"></Input>
          </FormItem>
        </Col> 

        <Col span="12" style="border: none">
          <FormItem prop="supvLvlId" label="职级编号">
            <Input placeholder="请输入职级编号" clearable v-model.trim="formInfo.supvLvlId" :maxlength="50" style="width: 100%"></Input>
          </FormItem>
        </Col> 
     
        <Col span="12" style="border: none">
          <FormItem prop="crcSupvLvlDesc" label="职级名称">
            <Input placeholder="请输入职级名称" clearable v-model.trim="formInfo.crcSupvLvlDesc" :maxlength="50" style="width: 100%"></Input>
          </FormItem>
        </Col> 
      </Row>
    </Form>
  </div>
</template>
<script>

import tenantAPI from "@/api/tenantApi.js";
import {addOrUpdateTSJLM } from '@api/trip/standard/standardRank.js';
import debounce from "lodash/debounce";
import { mapGetters } from "vuex";
import { CoreModuleName } from '@/const.js';
export default {
  name: 'StandardRankDetail',
  props: {
    // * 差标ID
    id: {
      type: [String,Number], 
    },
    detail:{
      type:Object,
      default:() => {}
    }
  },
  data() {
    return { 
      userInfo:{},
      loadingFinish:false,
      tenantList: [], // 租户列表
      // tab 选项卡
      formInfo: {
        businessUnit: "",
        company: "",
        companyDescr: "",
        tenantCode: "",
        standard: "",
        supvLvlId: "",
        crcSupvLvlDesc: ""
      },

      rule: {
        // businessUnit: [{ required: true, message: '请输入BU编码', trigger: 'blur' }], 
        // company:[{ required: true, message: '请输入公司编码', trigger: 'blur' }],
        // companyDescr:[{ required: true, message: '请输入公司名称', trigger: 'blur' }],  
        tenantCode:[{ required: true, message: '请选择所属租户', trigger: 'change' }],  
        // standard:[{ required: true, message: '请输入差旅编码', trigger: 'blur' }], 
        // supvLvlId:[{ required: true, message: '请输入职级编号', trigger: 'blur' }], 
        // crcSupvLvlDesc:[{ required: true, message: '请输入职级名称', trigger: 'blur' }]
      },
      actions: [
        {
          text: this.$t('common.save'),
          theme: 'primary',
          action:"save",
          handle: debounce(()=>this.handleSave(),300),
          loading: false
        },
        {
          text: this.$t('common.close'),
          handle: () => {
            this.$emit('Close')
          }
        }
      ]
    }
  },
  computed: { 
    ...mapGetters(['isPlatformAdmin']), 
  },
  created: function() {
    this.userInfo  = $store.state[CoreModuleName]?.userInfo;
    this.tenantList = []
    this.$Spin.show({
        render: (h) => {
            return h('div', [
                h('Icon', {
                    'class': 'spin-icon-load',
                    props: {
                        type: 'ios-loading',
                        size: 18
                    }
                }),
                h('div', '加载中...')
            ])
        }
    });
    //#region  sidelipPage 配置
    if (this.id) {
      this.$emit('SetTitle', '编辑差标配置')
    } else {
      this.$emit('SetTitle', '新增差标配置')
    }
    this.$emit('SetPageWidth', 700)
    this.$emit('SetPageActions', this.actions)
    //#endregion
    this.init() 
  },
  methods: {  
    init() { 
      this.$Spin.hide();
      if (this.id) {
        this.formInfo = Object.assign({},this.detail)
      } else {
        this.formInfo = {
          businessUnit: "",
          company: "",
          companyDescr: "",
          tenantCode: "",
          standard: "",
          supvLvlId: "",
          crcSupvLvlDesc: ""
        };
      }
      if(this.isPlatformAdmin){ 
         /**
         * 加载所有租户
         */
         tenantAPI.queryTenantList().then(data => {
          // const {tenantName ,tenantCode,id }
          this.tenantList = data
            
        })
        this.$set(this.formInfo,'tenantCode',this.formInfo?.tenantCode);
      }
      else{
        this.$set(this.formInfo,'tenantCode',this.userInfo?.tenantCode);
        this.tenantName = this.userInfo?.tenantName
      }
      this.loadingFinish = true;
    },

    handleSave() {
      this.$refs['formInfo'].validate(valid => {
        if (valid) {
          this.actions[0].loading = true
          const {
            businessUnit,
            company,
            companyDescr,
            tenantCode,
            standard,
            supvLvlId,
            crcSupvLvlDesc,
            id
          } = this.formInfo
          let param = {
            businessUnit,
            company,
            companyDescr,
            tenantCode,
            standard,
            supvLvlId,
            crcSupvLvlDesc,
            id
          }
          addOrUpdateTSJLM(param)
            .then(data => {
              console.log("0000")
              this.actions[0].loading = false
              if (data.code === "0") {
                this.$message.success({
                  content: this.id ? '编辑成功' : '添加成功',
                  duration: 3
                });
                this.$emit('Close', true); 
              } else {
                this.$message.error({
                  content: data.message || "保存失败",
                  duration: 3
                });
              }  
            })
            .catch(data => {
              console.log("11")
              this.actions[0].loading = false
            })
        }
      })
    },
 
  }
}
</script>
<style scoped lang="less">
.detail-form {
  background: #f4f6fd;
  .form {
    background: #fff;
    padding: 24px 24px 12px 24px;
    .ivu-row {
      margin-bottom: 0px;
      .last-item {
        margin-bottom: 0px;
      }
    }
    .form-title {
      display: block;
      font-size: 16px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 600;
    }
  }
}
</style>
